<template>
  <div class="indexPage">
    <div class="top">
      <span class="fh"><van-icon name="arrow-left" @click="fh" /></span>
      <span>商品分类</span>
    </div>
    <div class="mainCenter">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="i"
          v-for="i in item"
          :key="i"
          style="height: 55px; line-height: 55px; width: 80px"
          @click="dtl(i)"
          class="tw"
        />
        <!-- <van-sidebar-item title="标签名称" />
        <van-sidebar-item title="标签名称" /> -->
      </van-sidebar>
      <div class="right">
        <van-grid>
          <van-grid-item
            icon="photo-o"
            center="false"
            v-for="(j, index) in texts"
            :key="index"
            :text="j.brand"
            class="tw"
            @click="goSearchList(j.brand)"
          />
        </van-grid>
      </div>
    </div>
    <FooterBarVue class="footer"></FooterBarVue>
  </div>
</template>

<script>
import { Notify } from "vant";

import axios from "axios";
import FooterBarVue from "../components/FooterBar.vue";
export default {
  name: "Sort",
  components: {
    FooterBarVue,
  },
  data() {
    return {
      item: [],
      activeKey: 0,
      texts: [],
    };
  },
  methods: {
    onChange(index) {
      // Notify({ type: "primary", message: index });
    },
    dtl(i) {
      // console.log(i);
      // (this.texts = i),
      this.$service({
        url: "/api/pro/categorybrandlist",
        params: {
          category: i,
        },
      }).then((res) => {
        this.texts = res.data.data;
      });
    },
    fh() {
      this.$router.go(-1);
    },
    goSearchList(i){
      this.$router.push("/SearchList/"+i);
    }
  },
  created() {
    axios({
      url: "/api/pro/categorylist",
    }).then((res) => {
      // console.log(res,'res');
      this.item = res.data.data;
      // console.log("this.item: ", this.item);
    });
    axios({
      url: "/api/pro/categorybrandlist",
      params: {
        category: "手机",
      },
    }).then((res) => {
      // console.log(res);
      this.texts = res.data.data;
      // console.log("this.text: ", this.texts);
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.indexPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainCenter {
  flex: 1;
  overflow: auto;
  text-align: center;
  display: flex;
}
.ft,
.top {
  height: 3rem;
}
.right {
  flex: 1;
}
.tw {
  width: 23%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.top {
  text-align: center;
  line-height: 3rem;
  border-bottom: 2px solid gray;
  position: relative;
}
.fh {
  position: absolute;
  font-size: 20px;
  left: 1rem;
}

</style>